<script setup>
import {defineAsyncComponent, ref} from "vue";
import {router} from "@inertiajs/vue3";
import useTable from "@/composables/useTable";
import useRequest from "@/composables/useRequest.js";
import {Message} from "@arco-design/web-vue";
import AppPage from "@/pages/admin/layouts/AppPage.vue";

const FormPopup = defineAsyncComponent(() => import('./components/FormPopup.vue'));

const props = defineProps({
    data: {
        type: Array,
        default: () => []
    },
    title: {
        type: String,
        default: () => '文章分类管理',
    }
})

const {TableRef, bordered, scroll} = useTable()
const {deleteApi} = useRequest('admin.content.article.categories')


const formPopupRef = ref()
const handleAdd = () => formPopupRef.value?.add()
const handleEdit = (id) => formPopupRef.value?.edit(id)
const handleDelete = async (id) => {
    await deleteApi(id)
    router.reload()
    Message.success('删除成功')
}

</script>

<template>
    <app-page :breadcrumbs :title>
        <a-card
            :body-style="{ padding: '0' }"
            :header-style="{ padding: '16px 20px', borderBottom: '1px solid #f0f0f0' }"
            :style="{ borderRadius: '8px', overflow: 'hidden' }"
            :title="title"
            class="custom-card shadow-sm transition-all duration-300 hover:shadow-md"
        >


            <!-- 操作栏 -->
            <div class="p-3 bg-white border-b border-gray-100">
                <div class="flex flex-wrap items-center justify-between gap-3">
                    <a-button type="primary" @click="handleAdd"> 新增分类</a-button>
                </div>
            </div>

            <div class="p-4">
                <a-table
                    ref="TableRef"
                    :bordered
                    :data="data"
                    :default-expand-all-rows="false"
                    :hide-expand-button-on-empty="true"
                    :pagination="false"
                    :scroll
                    :scrollbar="false"
                    :show-empty-tree="false"
                    :table-layout-fixed="true"
                    column-resizable
                    row-key="id"
                >
                    <template #columns>
                        <a-table-column :min-width="180" data-index="name" ellipsis title="分类名称" tooltip />
                        <a-table-column :width="140" data-index="slug" title="分类标识" />
                        <a-table-column :width="140" data-index="description" title="分类描述" />
                        <a-table-column :width="140" data-index="status" title="状态" >
                            <template #cell="{ record }">
                                <a-tag :color="record.status === 1 ? 'cyan' : 'red'">
                                    {{ record.status === 1 ? '显示' : '隐藏' }}
                                </a-tag>
                            </template>
                        </a-table-column>
                        <a-table-column :width="140" data-index="sort" title="排序" />
                        <a-table-column :width="180" data-index="created_at" title="创建时间" />
                        <a-table-column :width="180" fixed="right" title="操作">
                            <template #cell="{ record }">
                                <a-space>
                                    <a-link @click="handleEdit(record.id)"> 编辑</a-link>

                                    <a-popconfirm
                                        content="您确定要删除该项吗?"
                                        type="warning"
                                        @ok="() => handleDelete(record.id)"
                                    >
                                        <a-link status="danger"> 删除</a-link>
                                    </a-popconfirm>
                                </a-space>
                            </template>
                        </a-table-column>
                    </template>
                </a-table>

            </div>
            <form-popup ref="formPopupRef" @success="router.reload()"/>
        </a-card>
    </app-page>
</template>

<style scoped>

</style>
